const VERTEX_SHADER_SOURCE = `
  attribute vec4 a_Position;
  attribute float a_PointSize;
  void main() {
    gl_Position = a_Position;
    gl_PointSize = a_PointSize;
  }
`;

const FRAGMENT_SHADER_SOURCE = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

const main = () => {
  /** @type { WebGL2RenderingContext } */
  const gl = setupWebgl(document.querySelector("#root"));
  initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

  const aPosition = gl.getAttribLocation(gl.program, "a_Position");
  if (aPosition < 0) {
    console.error("Failed to get the storage location of a_Position");
  }

  const aPointSize = gl.getAttribLocation(gl.program, "a_PointSize");
  if (aPointSize < 0) {
    console.error("Failed to get the storage location of a_PointSize");
  }

  // 可以利用setInterval 进行传值来查看红点的位置变化
  // 位置坐标用 (Math.random() * 2 - 1, Math.random() * 2 - 1, 0.0)

  gl.vertexAttrib3f(aPosition, 0.0, 0.0, 0.0);
  gl.vertexAttrib1f(aPointSize, 100);
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);
};
